
<html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>workerman-chat PHP聊天室 Websocket(HTLM5/Flash)+PHP多进程socket实时推送技术</title>
  <base href="__ROOT__/chat/style/">
  <script type="text/javascript">
  //WebSocket = null;
  </script>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <!-- Include these three JS files: -->
  <script type="text/javascript" src="js/swfobject.js"></script>
  <script type="text/javascript" src="js/web_socket.js"></script>
  <script type="text/javascript" src="js/jquery.min.js"></script>

  <script type="text/javascript">
    $(function(){

         // 创建websocket
         ws = new WebSocket("ws://"+document.domain+":7272");
         // 当socket连接打开时，输入用户名
         ws.onopen = function(){
            ws.send('{"type":"online","content":"上线啦"}');
         };
         // 当有消息时根据消息类型显示不同信息
         ws.onmessage = function(e){
            var obj=JSON.parse(e.data);
            //发送信息
            if(obj.type=='msg'){
              var html='<p>'+obj.client_id+':'+unescape(obj.content)+'</p>';
              $("#showmsg").prepend(html);
              $("#content").html('');
              $("#usernamelist").html('');
              $("#usernamelist").append("<p style='margin-left:20px;color:red'> 自己 : "+obj.client_id+"</p>");
              
              $.each(obj.userlist,function(name,value){ 
                 var num=(name*1)+(1*1); 
                 var html ="<p style='margin-left:20px'> "+num+"："+value+"</p>"; 
                 $("#usernamelist").append(html);
              });

            }
            //登录提示
            if(obj.type=='online'){
              var html='<p>'+obj.client_id+':'+obj.content+':'+obj.send_time+'</p>';
              $("#showmsg").append(html);
              $("#content").html('');
              $("#usernamelist").html('');
              $("#usernamelist").append("<p style='margin-left:20px;color:red'> 自己 ： "+obj.client_id+"</p>");
              $.each(obj.userlist,function(name,value){ 
                 var num=(name*1)+(1*1); 
                 var html ="<p style='margin-left:20px'> "+num+"："+value+"</p>"; 
                 $("#usernamelist").append(html);
              });
              //console.log(obj.userlist);              
            }

          
         }; 
         ws.onclose = function() {
         alert("连接关闭，定时重连");
         };
         ws.onerror = function() {
         alert("出现错误");

         };


         $(document).on('click','#submit',function(){
            var content =$.trim($('#content').html());
            content=escape(content);
      
            ws.send('{"type":"msg","content":"'+content+'"}');
         })


         $(document).on('click','.photoimg',function(){
            var imgpath =$(this).attr('src');

            var html="<img src='"+imgpath+"'>";

            $("#content").append(html);
            
         })

         $(document).on('click','#face',function(){
            $("#faceimg").toggle();
            
         })
    })


  </script>
</head> 
<body>
  
<h2 style="margin-left:200px">聊天室</h2>
<hr class="divider">
<div class="container" style="margin-top:20px">
    <div class="row">
          <div class="col-md-2">
                  <div class="text-center" id="left-content" >
                    <div class="list-group">
                        <a href="" class="list-group-item">个人资料</a>
                    </div>
                    <div class="list-group">
                        <a href="" class="list-group-item">买家</a>
                        <a href="" class="list-group-item">朋友</a>
                        <a href="" class="list-group-item active">群聊</a>
                    </div>
                    <div class="list-group">
                      <a href="" class="list-group-item">设置</a>
                      <a href="" class="list-group-item">帮助</a>
                    </div>
                  </div>
          </div>
      

          <div class="col-md-8">
                  <div style="float:left;width:500px;height:400px;">
                      <div style="width:400px;height:200px;border:1px solid;overflow-y:scroll;float:left;" id="showmsg" ></div>

                      <div  style="width:330px;height:100px;border:1px solid;float:left;" id="content" contenteditable="true"></div>
                      <div  style="width:50px;height:100px;float:left;margin-left:20px">
                              <button class="btn btn-primary" id="face" style="margin-top:5px">表情</button>
                              <button class="btn btn-primary" id="submit" style="margin-top:20px">提交</button>
                      </div>  

                 </div>

                 <div style="width:200px;height:400px;border:1px solid;float:left;overflow-y:scroll;display:none" id="faceimg">
                        <?php for($i=1;$i<250;$i++){ ?>
                            <img src="biaoimg/<?php echo "food$i.gif" ?>" alt="" class='photoimg'>
                        <?php } ?>
                 </div>
            
          </div>
                  

         <div class="col-md-2"  style="background-image:url('img/timg.jpg')";>
                  <div style="height:500px;float:left;overflow-y:scroll;" id="usernamelist"></div>
         </div>
    </div>
</div>
</body>
</html>










